<template>
<div class="wrapper">
  <div class="search-wrapper">
      <input 
        class="search" 
        type="text" 
        placeholder="输入城市名或拼音"
        v-model="searchValue"
      >
  </div>
  <div class="search-list" v-show="listShow">
    <ul>
      <li 
        v-for="(item,index) of searchList" 
        :key="index"
        @click="clickChange(item)"
      >
        {{item}}
      </li>
      <li v-show="valueShow">没有找到搜索城市</li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  name: 'CitySearch',
   props:{
      cities:Object
  },
  data(){
    return{
      searchValue:'',
      searchList:[],
      timer:null
    }
  },
  computed:{
    valueShow(){
      return !this.searchList.length
    },
    listShow(){
       if(!this.searchValue){
         return false
       }else{
         return true
       }
    }
  },
  watch:{
    searchValue(){
      if(this.searchValue){
        if(this.timer){
         clearTimeout(this.timer)
        }
        this.timer=setTimeout(()=>{
          let arr=[];
          for(let i in this.cities){
            this.cities[i].forEach((item)=>{
              if(item.spell.indexOf(this.searchValue)>-1||item.name.indexOf(this.searchValue)>-1){
                arr.push(item.name)
              }
            })
          }
          return this.searchList=arr;
        },16)
      }else{
        this.searchList=[]
      }
    }
  },
  methods:{
    clickChange(city){
        this.$store.commit('cityChange',city)
        this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.search-wrapper{
    height: .82rem;
    overflow: hidden;
    background: #00bcd4;
    padding:.1rem;
    box-sizing: border-box;
}
.search{
    width:100%;
    height: .62rem;
    line-height: .62rem;
    text-align: center;
    box-sizing: border-box;
    border-radius: .06rem;
    padding:.1rem;
}
.search-list{
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  top:1.68rem;
  background:#fff;
  z-index:99;

}
.search-list li{
  line-height: .54rem;
  text-align: left;
  padding-left: .1rem;
  border-bottom: .02rem solid #ccc;
}
</style>